ログインページ見た目実装 #74
ログインページ見た目実装 #74
Conversation
|
取り急ぎ1つ目だけ |
|
@YuHima03 |
ダウンロードできる画像はいずれも「Continue with Google」などと書かれているボタンのもので、日本語で「Google でログイン」と書かれてはおらず、アスペクト比もデザインファイルにて指定されたデザインとは大きく異なります。ガイドラインに載っている形式を優先するならば以下どちらかになりそうです
|
|
自分は文字の書いていないグーグルのアイコンだけのものを指しているつもりでした、日本語が悪くて申し訳ないです🙏
|
|
返信遅くなってすみません！🙇♂️
|
There was a problem hiding this comment.
@kitsne241
ありがとうございます! めちゃくちゃ良さそうです!
いくつか細かい点に関してコメントを書いたので見てほしいです。
(デザインがまだ完全には確定していないので、現時点では変更しなくて良い場所もあるかもしれないです。その場合は無視していただけるとありがたいです。)
| <div class="flex w-82 flex-col p-2.5"> | ||
| <button class="service_button"> | ||
| <img src="@/assets/service_icons/github.svg" class="mr-2.5 h-5" /> | ||
| <p class="service_text">GitHub でログイン</p> |
There was a problem hiding this comment.
| <p class="service_text">GitHub でログイン</p> | |
| <span class="service_text">GitHub でログイン</span> |
ここは<button>タグ内なので、<p>ではなく<span>などの記述コンテンツとなるタグにしたほうが良い気がします。(Google, traQログインの部分も同様です)
| <input placeholder="メールアドレス" class="input" /> | ||
| <input placeholder="パスワード" class="input" /> |
There was a problem hiding this comment.
ここに関して、<EmailTextbox>や<PasswordTextbox>コンポーネントを使ったほうがよいと思うのですが、これらのコンポーネントはFigmaに提示されているデザインとスタイルが異なりますね... (border-radiusなどがわかりやすい)
@YuHima03 現在FigmaにあるLoginページのデザインを使うか、Textboxコンポーネントのスタイルにするか、どちらが良いでしょうか?
There was a problem hiding this comment.
| <PrimaryButton class="mr-3 h-full w-37 rounded-lg" text="ログイン" /> | ||
| <BorderedButton class="h-full w-37 rounded-lg" text="新規登録" /> | ||
| </div> | ||
| <router-link to="" class="h-4 text-12px font-normal text-[#3A3A3A] underline"> |
There was a problem hiding this comment.
ここの文字のスタイルは、
- family・size・weightについては
class="fontstyle-ui-caption"(FigmaのDocumentページを参照してほしいです) - 色の指定として
class="text-[#3A3A3A]" - 下線として
class="underline"
を使用すると簡潔だと思います。
また、.fontstyle-ui-captionはsrc/assets/main.css内で定義しているのですが、2つ定義されてしまっています... 変更のついでに下にある方を.fontstyle-ui-caption-strongに改名していただけるとありがたいです。すみません。
@YuHima03 text-primary (#2A2A2A) やtext-secondary (#6A6A6A) に揃えてしまっても良いかと思いますが、どうでしょうか? デザインがまだ確定しきっていないなら一旦このままにしても良いとは思います
| @apply mb-3 flex h-10 w-full items-center justify-center rounded-lg border border-border-secondary; | ||
| } | ||
| .service_text { | ||
| @apply font-primary text-14px font-medium text-[#3A3A3A]; |
There was a problem hiding this comment.
36行目への指摘と同様に、family・size・weightに関しては.fontstyle-ui-control-strongを使用していただけると簡潔だと思います。
| @apply font-primary text-14px font-medium text-[#3A3A3A]; | |
| @apply fontstyle-ui-control-strong text-[#3A3A3A]; |
| primary: ['Open Sans', 'Noto Sans JP', 'sans-serif'] | ||
| primary: ['Noto Sans JP', 'Open Sans', 'sans-serif'] |
There was a problem hiding this comment.
Loginページのデザインでは英語・日本語をすべてNoto Sans JPで描画するようになっているのですが、英字はOpen Sans、日本語はNoto Sans、と分けたいので、(LoginページのFigmaとはズレてしまうのですが)ここの変更は戻してほしいです...!
| class="flex items-center justify-center bg-background-secondary" | ||
| > | ||
| <div class="w-200 rounded-2xl bg-background-primary px-14 py-10"> | ||
| <h1 class="mb-5 h-9 font-primary text-28px font-medium text-[#1E1E1E]">ログイン</h1> |
There was a problem hiding this comment.
詳しくは36行目への指摘を見てほしいのですが、family・size・weightに関しては.fontstyle-ui-titleを使用していただけると簡潔だと思います。
| <h1 class="mb-5 h-9 font-primary text-28px font-medium text-[#1E1E1E]">ログイン</h1> | |
| <h1 class="mb-5 fontstyle-ui-title text-[#1E1E1E]">ログイン</h1> |
(なお、このような文字のスタイル名(fontstyle-hoge-fuga)は、Figma上でテキストをクリックすると楽に確認できます!)
| fontSize: { | ||
| '12px': '12px', | ||
| '14px': '14px', | ||
| '28px': '28px' | ||
| } |
There was a problem hiding this comment.
他のコメントの変更でpx単位は不要になっていると思うので、ここは消してもらって大丈夫なはずです!
|
色々とありがとうございます！不慣れなものでお手数おかけしてすみません…
とりあえずこの4点ですね。今週中には修正します 🙏 |
再掲